<template>
  <div id="bigbox">
    <div id="container" style="width: 100%; height: 90vh"></div>

    <!-- 底部选项栏 -->
    <mt-tabbar
      v-model="selected"
      style="width: 100%; height: 13vh; z-index: 999"
    >
      <mt-tab-item id="订单">
        <img slot="icon" src="../assets/images/app/home.png" />
        首页
      </mt-tab-item>
      <mt-tab-item id="发现">
        <img slot="icon" src="../assets/images/app/map.png" />
      </mt-tab-item>
      <mt-tab-item id="我的">
        <img slot="icon" src="../assets/images/app/wode.png" />
        我的
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
  securityJsCode: "d397e24bab790d0ae2f259dc630a3058",
};
export default {
  methods: {
     axiosZoom(url, params) {
      return this.axios.post(url, params).then((res) => {
        // console.log(res.data);
        this.dat = res.data;
        // console.log(this.dat);
      });
    },
    printZoom(name, num, url, map, axiosZoom) {
      // console.log(this);

      console.log(this.dat);
      // console.log(this._data);
      /*let aname = [
        "Alisiana",
        "Aashi",
        "Amando",
        "Aftin",
        "Anissia",
        "Alonni",
        "Amariyah",
        "Ayako",
        "Adleigh",
        "Allon",
        "Beki",
        "Bettsy",
        "Byntlee",
        "Bilaal",
        "Burkleigh",
        "Bernadina",
        "Brently",
        "Barbetta",
        "Branyah",
        "Bedie",
        "Chetan",
        "Candita",
        "Cevera",
        "Coralline",
        "Cordarell",
        "Chaely",
        "Calbe",
        "Cubie",
        "Charolette",
        "Coraima",
        "Dabriel",
        "Davan",
        "Daizee",
        "Diamantina",
        "Dravon",
        "Dalaya",
        "Deshanna",
        "Dezire",
        "Deshai",
        "Dalenna",
        "Eliuth",
        "Eleena",
        "Edison",
        "Elaysha",
        "Emiterio",
        "Enjolie",
        "Elmeta",
        "Ezriah",
        "Eliannys",
        "Elrico",
        "Friday",
        "Frida",
        "Francys",
        "Frances",
        "Falone",
        "Fidelis",
        "Funda",
        "Fitzhugh",
        "Fedrick",
        "Fumie",
        "Gilliana",
        "Glennell",
        "Gaspare",
        "Gracilynn",
        "Gertrudes",
        "Godwin",
        "Graice",
        "Garn",
        "Gotham",
        "Geet",
        "Hovanes",
        "Huxlie",
        "Henslee",
        "Henrine",
        "Heinrich",
        "Hadeel",
        "Hema",
        "Hamna",
        "Hend",
        "Hennie",
        "Ivion",
        "Infant",
        "Iyaad",
        "Issabella",
        "Iakona",
        "Ishmel",
        "Isaha",
        "Izaak",
        "Izmael",
        "Idora",
        "Jenuel",
        "Jorren",
        "Jajuana",
        "Juanjose",
        "Janaia",
        "Jonh",
        "Jaleena",
        "Judia",
        "Jacquitta",
        "Jonerik",
        "Kaiana,",
        "Kristoph",
        "Karsyon",
        "Kaiesha",
        "Kathiana",
        "Kdynce",
        "Krisan",
        "Keyani",
        "Keyonte",
        "Kathrine",
        "Leondro",
        "Lashica",
        "Lorece",
        "Lavarious",
        "Laynee",
        "Lendia",
        "Lurena",
        "Lelar",
        "Latrevia",
        "Lowis",
        "Maxmillian",
        "Maxmillian",
        "Meena",
        "Momen",
        "Malysa",
        "Mylin",
        "Mayrin",
        "Michalea",
        "Maevis",
        "Myani",
        "Nanea",
        "Nyhla",
        "Nseya",
        "Nakeira",
        "Nasiah",
        "Naiyah",
        "Nilayah",
        "Nacy",
        "Niral",
        "Nashaun",
        "Ozan",
        "Osbert",
        "Ozymandias",
        "Onawa",
        "Ola",
        "Odetta",
        "Oluwatoni",
        "Opeyemi",
        "Opeyemi",
        "Opeyemi",
        "Pearle",
        "Priti",
        "Parth",
        "Payson",
        "Philipe",
        "Pala",
        "Phillp",
        "Petie",
        "Presha",
        "Psalm",
        "Quandre",
        "Qiara",
        "Qualin",
        "Quaylen",
        "Quintus",
        "Queenisha",
        "Queen",
        "Quanetta",
        "Quinlin",
        "Quatavius",
        "Rhianne",
        "Rainer",
        "Rpbert",
        "Remel",
        "Rollene",
        "Reizel",
        "Raena",
        "Riki",
        "Raesean",
        "Roshell",
        "Sheriece",
        "Sonye",
        "Sari",
        "Sherryl",
        "Savonne",
        "Susan",
        "Selestine",
        "Sharisse",
        "Sarriah",
        "Shantai",
        "Tajohn",
        "Till",
        "Tykeyah",
        "Tima",
        "Taziya",
        "Teren",
        "Tashaye",
        "Toosdhi",
        "Taizlee",
        "Torriano",
        "Uel",
        "Ules",
        "Uniqueka",
        "Ursule",
        "Unika",
        "Ute",
        "Uhl",
        "Uarda",
        "Umi",
        "Umair",
        "Vikram",
        "Victorian",
        "Viara",
        "Virgilene",
        "Viola",
        "Verene",
        "Velora",
        "Veanna",
        "Velmer",
        "Vince",
        "Warwick",
        "Willodean",
        "Wess",
        "Wambui",
        "Wallie",
        "Wincie",
        "Waclaw",
        "Watisha",
        "Walberto",
        "Waden",
        "Xain",
        "Xiomar",
        "Xandrea",
        "Xion",
        "Xyla",
        "Xayah",
        "Xina",
        "Xaver",
        "Xanti",
        "Xan",
        "Yoland",
        "Yamila",
        "Yanah",
        "Yorman",
        "Yumika",
        "Yaret",
        "Yomira",
        "Yudelca",
        "Yadiel",
        "Yelixa",
        "Zaraiyah",
        "Zarra",
        "Zyquarius",
        "Zohar",
        "Zyad",
        "Zekai",
        "Zaveion",
        "Zamyah",
        "Zyann",
        "Zikeria",
      ];
      let zoomstatus = ["健康", "濒死", "抑郁", "饥饿", "发情"];*/
      let searchObj = new AMap.PlaceSearch({
        city: "杭州",
      });
      searchObj.search(`杭州野生动物世界-${name}`, function (status, result) {
        // console.log(status, result);
        let location = result.poiList.pois[0].location;
        // console.log(location.lat, location.lng);

        var icon1 = new AMap.Icon({
          size: new AMap.Size(20, 20), // 图标尺寸
          image: `${url}`, // Icon的图像
          // imageOffset: new AMap.Pixel(0, -60),  // 图像相对展示区域的偏移量，适于雪碧图等
          imageSize: new AMap.Size(20, 20), // 根据所设置的大小拉伸或压缩图片
        });

        // 添加一个点标记
        // let axiosurl = `http://localhost:3000/v1/animal/animalAdd`;
        let axiosurl = `http://localhost:3000/v1/animal/animalselect`;
        let params = `race=${name}`;
        let a = axiosZoom(axiosurl, params);
        console.log(a);

        for (let i = 0; i < num; i++) {
          let rand1 = (Math.random() * 2 - 1) / 1e5;
          let rand2 = (Math.random() * 2 - 1) / 1e5;
          // let rand3 = Math.floor(Math.random() * 259);
          // let rand4 = Math.floor(Math.random() * 5);

          let marker = new AMap.Marker({
            // position: [location.lng + rand1, location.lat + rand2],
            position: [location.lng + rand1, location.lat + rand2],
            icon: icon1,
            offset: new AMap.Pixel(-10, -10),
            zoom: 13,
          });
          // let aaaname = aname[rand3];0
          // let age = Math.floor(Math.random() * 5 + 1);
          // let status = zoomstatus[rand4];
          // let rate = Math.floor(Math.random() * 30 + 60);
          /*let params = `aname=${aaaname}&race=${name}&age=${age}&status=${status}&rate=${rate}&longitude=${
            location.lng + rand1
          }&latitude=${location.lat + rand2}`;*/

          // axiosZoom(axiosurl, params);

          map.add(marker);
          // console.log(window.AMap.Map);
          marker.on("click", function (e) {
            let infoWindow = new AMap.InfoWindow({
              isCustom: true,
              content: `<div style="border:1px solid black; padding:10px;background:#fff;  border-radius: 15px;
;" >
          <p>学名:${name}</p>
          <p>姓名:${aaaname}</p>
          <p>年龄:${age}</p>
          <p>心率:${rate}</p>
          <p>健康状况:${status}</p>
        </div>`,
              offset: new AMap.Pixel(16, -45),
            });
            // console.log(infoWindow);
            // 在地图中标记点旁边，打开infoWindow窗口
            infoWindow.open(map, e.target.getPosition());
          });
        }
      });
    },
  },
  data() {
    return {
      selected: "map",
      dat: "",
    };
  },
  mounted() {
    //  let map = new AMap.Map("container", { viewMode: "3D" });
    // 加载AMap
    AMapLoader.load({
      key: "da7a5711aac308d55f1aa8c89fe1eeb8",
      version: "2.0",
      plugins: ["AMap.ToolBar", "AMap.PlaceSearch"],
    }).then((AMap) => {
      let lng = 119.985091;
      let lat = 30.148404;
      // 将地图显示在#container的div中
      let map = new AMap.Map("container", { viewMode: "3D" });

      // console.log(map);
      map.setCenter([lng, lat]); //中心点
      map.setZoom(20); //缩放级别
      map.addControl(new AMap.ToolBar());

      // 同时引入工具条插件，比例尺插件和鹰眼插件
      AMap.plugin(
        [
          "AMap.ToolBar",
          "AMap.Scale",
          "AMap.HawkEye",
          "AMap.MapType",
          "AMap.Geolocation",
        ],
        function () {
          // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
          map.addControl(new AMap.ToolBar());

          // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
          map.addControl(new AMap.Scale());

          // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
          map.addControl(new AMap.HawkEye({ isOpen: true }));

          // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
          map.addControl(new AMap.MapType());

          // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
          map.addControl(
            new AMap.Geolocation({ position: "LB", offset: [15, 60] })
          );
        }
      );

      this.printZoom("火烈鸟", 5, "/huolieniao.png", map, this.axiosZoom);

      // let searchObj = new AMap.PlaceSearch({
      //   city: "杭州",
      // });
      // searchObj.search("杭州野生动物世界-火烈鸟", function (status, result) {
      //   console.log(status, result);
      //   let location = result.poiList.pois[0].location;
      //   console.log(location.lat, location.lng);
      // });

      // 加载AMap.CitySearch插件, 查询当前城市名称
      // AMap.plugin("AMap.CitySearch", function () {
      //   let citySearch = new AMap.CitySearch();
      //   citySearch.getLocalCity(function (status, result) {
      //     console.log(status, result);
      //   });
      // });

      // 创建 AMap.Icon 实例：
      // var icon1 = new AMap.Icon({
      //   size: new AMap.Size(30, 30), // 图标尺寸
      //   image: "/huolieniao.png", // Icon的图像
      //   // imageOffset: new AMap.Pixel(0, -60),  // 图像相对展示区域的偏移量，适于雪碧图等
      //   imageSize: new AMap.Size(30, 30), // 根据所设置的大小拉伸或压缩图片
      // });

      // 添加一个点标记
      // for (let i = 0; i < 2; i++) {
      //   let marker = new AMap.Marker({
      //     position: [lng - 0.0002 * i, lat - 0.00001 * i],
      //     icon: icon1,
      //     offset: new AMap.Pixel(-10, -10),
      //     zoom: 13,
      //   });
      //   map.add(marker);
      // }

      /*this.printZoom("白袋鼠", 5, "/daishu.png", map, this.axiosZoom);
      this.printZoom("白狮", 2, "/shizi.png", map, this.axiosZoom);
      this.printZoom("小白狮", 1, "/shizi.png", map, this.axiosZoom);
      this.printZoom("美洲狮", 1, "/shizi.png", map, this.axiosZoom);
      this.printZoom("耳廓狐", 3, "/huli.png", map, this.axiosZoom);
      this.printZoom("赤狐", 2, "/huli.png", map, this.axiosZoom);
      this.printZoom("银黑狐", 2, "/huli.png", map, this.axiosZoom);
      this.printZoom("金虎", 2, "/Artboard.png", map, this.axiosZoom);
      this.printZoom("白虎", 1, "/Artboard.png", map, this.axiosZoom);
      this.printZoom("黑虎", 1, "/Artboard.png", map, this.axiosZoom);
      this.printZoom("小白虎", 1, "/Artboard.png", map, this.axiosZoom);
      this.printZoom("东北虎", 2, "/Artboard.png", map, this.axiosZoom);
      this.printZoom("华南虎", 2, "/Artboard.png", map, this.axiosZoom);
      this.printZoom("孟加拉虎", 2, "/Artboard.png", map, this.axiosZoom);
      this.printZoom("西非冠鹤", 2, "/鹤.png", map, this.axiosZoom);
      this.printZoom("丹顶鹤", 2, "/鹤.png", map, this.axiosZoom);
      this.printZoom("白枕鹤", 1, "/鹤.png", map, this.axiosZoom);
      this.printZoom("东方白鹳", 2, "/鹤.png", map, this.axiosZoom);
      this.printZoom("冠鹊", 2, "/鹤.png", map, this.axiosZoom);
      this.printZoom("赤颈鹤", 2, "/鹤.png", map, this.axiosZoom);
      this.printZoom("蓑羽鹤", 2, "/鹤.png", map, this.axiosZoom);
      this.printZoom("马来熊", 1, "/xiong.png", map, this.axiosZoom);
      this.printZoom("美洲花豹", 2, "/bao.png", map, this.axiosZoom);
      this.printZoom("非洲牛蛙", 5, "/-qingwa.png", map, this.axiosZoom);
      this.printZoom("豹纹陆龟", 3, "/wugui.png", map, this.axiosZoom);
      this.printZoom("苏卡达陆龟", 3, "/wugui.png", map, this.axiosZoom);
      this.printZoom("巴西红耳龟", 3, "/wugui.png", map, this.axiosZoom);
      this.printZoom("海龟", 4, "/wugui.png", map, this.axiosZoom);
      this.printZoom("鳄龟", 1, "/wugui.png", map, this.axiosZoom);
      this.printZoom("湾鳄", 6, "/eyu.png", map, this.axiosZoom);
      this.printZoom("萨氏巨蜥", 3, "/xiyi.png", map, this.axiosZoom);
      this.printZoom("摩弗伦羊", 3, "/yangyang.png", map, this.axiosZoom);
      this.printZoom("高角羚", 6, "/yangyang.png", map, this.axiosZoom);
      this.printZoom("剑羚", 6, "/yangyang.png", map, this.axiosZoom);
      // this.printZoom("黑尾牛羚", 6, "/yangyang.png", map,axiosZoom);;
      // this.printZoom("驼羊", 6, "/yangyang.png", map,axiosZoom);;
      this.printZoom("孔雀园", 6, "/孔雀.png", map, this.axiosZoom);
      this.printZoom("孔雀", 2, "/孔雀.png", map, this.axiosZoom);
      this.printZoom("天鹅湖", 6, "/天鹅.png", map, this.axiosZoom);
      this.printZoom("黑颈天鹅", 2, "/黑天鹅.png", map, this.axiosZoom);
      this.printZoom("非洲顽猴", 7, "/houhou.png", map, this.axiosZoom);
      this.printZoom("环尾狐猴", 7, "/houhou.png", map, this.axiosZoom);
      this.printZoom("节尾狐猴", 7, "/houhou.png", map, this.axiosZoom);
      this.printZoom("赤猴", 2, "/houhou.png", map, this.axiosZoom);
      this.printZoom("川金丝猴", 2, "/houhou.png", map, this.axiosZoom);
      this.printZoom("猴子王国", 1, "/houhou.png", map, this.axiosZoom);
      this.printZoom("长臂猿", 2, "/houhou.png", map, this.axiosZoom);
      this.printZoom("短尾猴", 4, "/houhou.png", map, this.axiosZoom);
      this.printZoom("猩猩馆", 4, "/xingxing.png", map, this.axiosZoom);
      // this.printZoom("中华国宝区", 2, "/xiongmao.png", map,axiosZoom);;
      this.printZoom("熊猫殿", 4, "/xiongmao.png", map, this.axiosZoom);
      this.printZoom("小熊猫馆", 3, "/小熊猫.png", map, this.axiosZoom);
      this.printZoom("斑马", 9, "/斑马.png", map, this.axiosZoom);
      this.printZoom("非洲象", 9, "/大象.png", map, this.axiosZoom);
      this.printZoom("非洲白犀", 2, "/犀牛.png", map, this.axiosZoom);
      this.printZoom("白犀", 2, "/犀牛.png", map, this.axiosZoom);
      this.printZoom("安哥拉兔", 6, "/兔子.png", map, this.axiosZoom);
      this.printZoom("长颈鹿", 4, "/长颈鹿.png", map, this.axiosZoom);
      this.printZoom("野狼谷", 4, "/狼.png", map, this.axiosZoom);
      this.printZoom("豺狼", 4, "/狼.png", map, this.axiosZoom);
      this.printZoom("赤大袋鼠", 4, "/daishu.png", map, this.axiosZoom);
      this.printZoom("灰大袋鼠", 4, "/daishu.png", map, this.axiosZoom);
      this.printZoom("黑熊", 2, "/xiong.png", map, this.axiosZoom);
      this.printZoom("棕熊", 2, "/xiong.png", map, this.axiosZoom);
      this.printZoom("野马", 10, "/ma.png", map, this.axiosZoom);
      this.printZoom("广西矮马", 8, "/ma.png", map, this.axiosZoom);
      this.printZoom("野驴", 10, "/ma.png", map, this.axiosZoom);
      this.printZoom("猎豹", 2, "/bao.png", map, this.axiosZoom);*/
    });
  },
};
</script>

<style lang="scss" scoped>
#bigbox {
  display: flex;
  flex-direction: column;
  height: 100vh;
  user-select: none;
}
</style>